<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/global.css">
</head>
<body class="bg-gray">
<div id="app" v-cloak>
    <div class="page-header">
        <div class="page-header_inner">
            <img src="/static/logo.png" class="page-header_logo">

            <div class="page-header_menu">

                <a class="link-black" href="/">首页</a>
                <a class="link-black" href="#">客户端</a>
                <a class="link-black" href="/login.html" v-if="!user.id">登录</a>
                <a class="link-black" href="/user/account.html" v-if="user.id">
                    <el-popover placement="bottom" width="200" trigger="hover">
                        <div class="sub-menu">
                            <div>
                                <el-avatar :size="60" style="float: left" :src="user.avatar">
                                    <img src="/upload/image/03b0d39583f48206768a7534e55bcpng"/>
                                </el-avatar>
                                <div style="float: left; padding: 10px">
                                    <div class="user-nickname">{{user.nickname}}</div>
                                    <div class="user-mobile">{{user.mobile}}</div>
                                </div>
                            </div>
                            <div class="button-group">
                                <el-link size="small" :underline="false" href="/user/account.html">我的课程</el-link>
                                <el-link size="small" :underline="false" href="/user/setting.html">账号设置</el-link>
                                <el-link size="small" :underline="false" href="/admin/index.html">管理后台</el-link>
                                <el-link size="small" :underline="false" href="/logout.html">退出登录</el-link>
                            </div>
                        </div>
                        <div slot="reference">
                            <el-avatar :size="32" :src="user.avatar" class="page-header_avatar">
                                <img src="/upload/image/03b0d39583f48206768a7534e55bcpng"/>
                            </el-avatar>
                            个人中心
                        </div>
                    </el-popover>
                </a>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="panel">
            <div class="panel-body dashboard">
                <div class="dashboard-cell">
                    <div class="dashboard-value">{{dashboard.mins || 0}}</div>
                    <div class="dashboard-label">今日学习（分钟）</div>
                </div>
                <div class="dashboard-cell">
                    <div class="dashboard-value">{{dashboard.days || 0}}</div>
                    <div class="dashboard-label">累计学习（天）</div>
                </div>
                <div class="dashboard-cell">
                    <div class="dashboard-value">{{dashboard.courses || 0}}</div>
                    <div class="dashboard-label">学习课程（门）</div>
                </div>
            </div>
        </div>

        <div class="panel">
            <div class="panel-title">我的课程</div>
            <div class="panel-body course-list no-padding">
                <div class="course-list-item" v-for="(uc, index) in myCourses.list">
                    <el-image :src="uc.course.poster" class="course-item_poster">
                        <div slot="error" class="poster-placeholder">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <div class="course-item_text">
                        <el-link :underline="false" class="course-title" :href="'/course.html?courseId=' + uc.course.id">
                            {{uc.course.name}}
                        </el-link>
                        <div class="course-study-info">
                            <span class="info-block">更新至 {{uc.course.lessonCount || 0 }} 节</span>
                            <span class="info-block">学习至 {{uc.studying && uc.studying.name}}</span>
                        </div>
                        <div class="course-progress-info">
                            <span class="info-block">总课时 {{uc.course.hour}} 小时</span>
                            <span class="info-block">已学习 {{(uc.studiedMins / 60).toFixed(2)}} 小时</span>
                            <span class="info-block font-red">进度 {{((uc.studiedMins / 60) * 100 / uc.course.hour).toFixed(2)}}%</span>
                        </div>
                    </div>
                    <div class="course-item_button">
                        <el-button type="primary" round @click="study(uc)">继续学习</el-button>
                    </div>
                </div>

                <el-pagination :current-page="myCourses.page"
                               :page-size="myCourses.size"
                               :total="myCourses.total"
                               :hide-on-single-page="true"
                               @current-change="loadUserCourse"
                               layout="prev, pager, next"
                               class="mm_pagination"
                               background>
                </el-pagination>

                <div class="empty" v-if="myCourses.list && myCourses.list.length === 0">没有数据</div>
            </div>
        </div>
    </div>

    <div class="page-footer">
        <div class="page-footer_inner">
            <div>Copyright © 2021 All Rights Reserved.</div>
            <div>天津码码教育科技有限公司 版权所有 | 服务协议 | 隐私政策 | 侵权投诉 | 联系客服 | 帮助</div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {},
            dashboard: {},
            myCourses: {}
        },
        methods: {
            loadUserCourse: function (page = 1) {
                let vue = this;

                let url = `/user/course?page=${page}&size=10`;
                axios.get(url).then(resp => {
                    vue.myCourses = resp.data || {};
                });
            },
            loadStudyStatistic: function () {
                let vue = this;

                let url = '/user/statistic';
                axios.get(url).then(resp => {
                    vue.dashboard = resp.data || [];
                });
            },
            study: function (uc) {
                if (uc.course && uc.course.id) {
                    window.location.href = '/study.html?courseId=' + uc.course.id + '&lessonId=' + (uc.studying && uc.studying.id || '');
                }
            }
        },
        mounted: function () {
            let vue = this;

            vue.$loadLoginUser().then(user => {
                if (user == null) {
                    window.location.href = '/login.html';
                } else {
                    vue.loadUserCourse();
                    vue.loadStudyStatistic();
                }
            });
        }
    })
</script>
</html>
